@use "scss/colors";
@use "scss/variables";
@use "scss/z-indices";

$blur-height: 15px;
$spacing: variables.$spacing-xl;

.container {
  overflow-y: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.contentContainer {
  flex: 1;
  max-width: 100%;
  overflow-x: auto;
  position: relative;

  &.softScrollEdge {
    padding-top: $spacing - $blur-height;
  }

  &:not(.softScrollEdge) {
    padding-top: $spacing;
  }
}

.contentScroll {
  overflow-y: auto;
  height: 100%;
}

.content {
  height: 95%;
  padding: 0 $spacing $spacing;

  &.noBottomPadding {
    padding-bottom: 0;
  }
}

.edge {
  position: sticky;
  width: 100%;
  top: 0;
  z-index: z-indices.$mainPageWithScrollEdge;
  min-height: $blur-height;
}
